<template>
  <div>
    <div id="editorElem">
    </div>
    <el-button type="primary" @click.native="editSubmit">提交</el-button>
  </div>
</template>


<script>
  import E from 'wangeditor'

  export default {
    name: "wangeditor",
    data() {
      return {
        editorContent: '',
        wangEditor: undefined
      }
    },
    mounted() {
      this.wangEditor = new E('#editorElem');

      this.wangEditor.customConfig.colors = ['#ff0000', '#eeece0', '#1c487f', '#4d80bf',
        '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff'];
      this.wangEditor.customConfig.emotions = [
        {
          // tab 的标题
          title: '默认',
          // type -> 'emoji' / 'image'
          type: 'image',
          // content -> 数组
          content: [
            {
              alt: '[坏笑]',
              src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/4d/2018new_huaixiao_org.png'
            },
            {
              alt: '[舔屏]',
              src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
            },
            {
              alt:'[嘻嘻]',
              src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/33/2018new_xixi_org.png'
            }
          ]
        },
        {
          // tab 的标题
          title: 'emoji',
          // type -> 'emoji' / 'image'
          type: 'emoji',
          // content -> 数组
          content: ['😄', '📢', '📦', '📦', '📢']
        }
      ];
      this.wangEditor.customConfig.onchange = (html) => {
        this.editorContent = html
      }

      this.wangEditor.create()
    },
    methods: {
      editSubmit() {
        console.log(this.editorContent);
      },
      handText(value) {
        let _this = this;
//                let E = window.wangEditor;
        this.wangeditor = new E('#editorElem');
        this.wangeditor.customConfig.zIndex = 100;
        //this.wangeditor.customConfig.uploadImgServer = URI_ZTH_UPLOAD_PIC;
        this.wangeditor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
        //this.wangeditor.customConfig.uploadImgParams = this.postData;
        //this.wangeditor.customConfig.uploadImgHeaders = this.uploadHeaders;
        this.wangeditor.customConfig.uploadImgTimeout = 30 * 1000;
        this.wangeditor.customConfig.uploadFileName = 'file';
        this.wangeditor.customConfig.onchange = function (html) {
          // html 即变化之后的内容
          _this.editForm.recommendedReason = html;
        };
        this.wangeditor.customConfig.uploadImgHooks = {
          success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            _this.$message({
              message: '上传成功',
              type: 'success'
            });
          },
          fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            _this.$message({
              message: '上传失败，请稍后重试',
              type: 'warning'
            });
          },
          error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            _this.$message.error('上传错误，请稍后重试');
          },
          timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            _this.$message('网络不好，请稍后重试');
          },

          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let code = result.code;
            let results = result.data;
            if (code === 0) {
              let url = results.urlPath;
              insertImg(url)
            }
          }
        };
        this.wangeditor.create();
        this.wangeditor.txt.html(value);
      },
    }
  }
</script>

<style scoped>

</style>